<template>
    <div>
        <el-divider content-position="center"><span style="font-size: 15px;color: #00d9ff">体温登记</span></el-divider>
        <div class="temStyle">
            <div style="width: 300px">
                <span>日期&nbsp:&nbsp&nbsp</span>
                <el-date-picker
                        readonly
                        v-model="time"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                </el-date-picker>
            </div>
            <div style="width: 300px">
                <span>体温&nbsp:&nbsp&nbsp</span>
                <el-input style="width: 200px" v-model="Temperature.tem" placeholder="请输入体温"
                          @input="(e) => (Temperature.tem = $limit.limitInput(e))"></el-input>
            </div>
            <div style="width: 100px">
                <el-button @click="insetTemperature"  type="primary" plain size="mini"><strong>提交</strong></el-button>
            </div>
        </div>
        <!--<div>
            时间固定，获取每日时间，，不允许修改，列表倒叙排列展示到列表中
        </div>-->
        <el-divider content-position="center"><span style="font-size: 15px;color: #00d9ff">我的体温</span>
        </el-divider>
        <div class="Style">
            <img style="width: 180px;height: 180px" src="../../assets/picture/manMeasureSick.png">
        <div style="width: 30%;padding-left: 25%">
            <el-table stripe size="mini" :data="AllTemperature.slice((currentPage-1)*pageSize,currentPage*pageSize)" max-height="180px">
                <el-table-column label="时间" prop="tim" min-width="50%"></el-table-column>
                <el-table-column label="体温" prop="tem"></el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           small
                           background
                           :page-sizes="[2,3,5,10]" :page-size="pageSize"
                           layout="total,prev, pager, next,sizes" :total="AllTemperature.length">
            </el-pagination>
        </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "MyTemperature",
        data() {
            return {
                time:new Date(),
                Temperature:{
                    tim: "",
                    tem: "",
                    tid:"",
                },
                AllTemperature:[],
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 2,// 每页的数据条数
            }
        },
        created() {
            this.Temperature.tid = window.sessionStorage.getItem('uid')
            this.getAllTemperature()
        },
        methods: {
            async insetTemperature() {
                if (this.Temperature.tem >= 42 || this.Temperature.tem <= 32) {
                    this.$message.error("请输入正确的体温;");
                } else {
                    var t = this.time.toLocaleDateString().split('/').join('-');
                    this.Temperature.tim = t;
                    console.log(this.Temperature.tim)
                    console.log(this.Temperature.tem)
                    const {data: res} = await this.$http.post("insetTemperature", this.Temperature);
                    if(res === "ok"){
                        //通过跳转其他页面，再跳回来，实现刷新页面
                        await this.$router.push({path: "/404"});
                        await this.$router.push({path: "/MyTemperature"})
                    }
                    if (res === "ok") {
                        this.$message.success("提交成功");
                    } else {
                        this.$message.error("提交失败");
                    }
                }
            },
            async getAllTemperature(){
                const{data: res} = await this.$http.get("getAllTemperature?tid="+this.Temperature.tid);
                this.AllTemperature = res;
            },
            /* 分页功能的实现 */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
        }
    }
</script>

<style scoped>
    .temStyle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .Style{
        display:flex;
        align-items:center;
        justify-content:center;
    }
</style>